<script setup>
import { ref } from 'vue'
import { useWallpaperStore } from '@/store/wallpaper.js'
import { onLoad, onReachBottom, onShareAppMessage } from '@dcloudio/uni-app'
import request from '@/utils/request'
import API from '@/utils/API'

const useWallpaper = useWallpaperStore()

const classid = ref('')
const type = ref('')
const className = ref('')
const currPage = ref(1)
const PageSize = ref(18)
const wallPaperList = ref([])
const showLoading = ref(true)
const noData = ref(false)
const paging = ref(null)

// 下拉刷新
const onRefresh = async () => {
	currPage.value = 1
	// console.log(currPage.value)
}

// 加载更多
const queryList = async () => {
	const data = await getClassifyDetail()
	
	if (data.length < PageSize.value) {
		noData.value = true
	}
	paging.value.complete(data)
	currPage.value++
}

const getClassifyDetail = async () => {
	let res
	console.log('type: ', type.value)
	console.log('classid: ', classid.value)
	if (type.value === 'classify') {
		res = await request({
			url: API.getClassifyDetail,
			data: {
				classid: classid.value,
				pageNum: currPage.value,
				pageSize: PageSize.value
			}
		})
	} else {
		res = await request({
			url: API.getUserWallList,
			data: {
				type: type.value,
				pageNum: currPage.value,
				pageSize: PageSize.value
			}
		})
	}
	
	const data = res.data
	console.log(data)
	
	// useWallpaper
	useWallpaper.wallpaperList = useWallpaper.wallpaperList.concat(data.map(item => {
		return {
			...item,
			picurl: item.smallPicurl.replace('_small.webp', '.jpg')
		}
	}))
	
	return data
}

// 跳转到详情大图
const ClickToDetail = (index) => {
	useWallpaper.currIndex = index
	uni.navigateTo({
		url: '/pages/preview/preview'
	})
}

// 骨架屏
const skeleton = ref([
	{
		type: 'flex',
		style: 'margin-bottom: 5rpx',
		children: [
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx;'
			},
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx; margin-left: 5rpx;'
			},
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx; margin-left: 5rpx;'
			}
		]
	},
	{
		type: 'flex',
		style: 'margin-bottom: 5rpx',
		children: [
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx;'
			},
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx; margin-left: 5rpx;'
			},
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx; margin-left: 5rpx;'
			}
		]
	},
	{
		type: 'flex',
		style: 'margin-bottom: 5rpx',
		children: [
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx;'
			},
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx; margin-left: 5rpx;'
			},
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx; margin-left: 5rpx;'
			}
		]
	},
	{
		type: 'flex',
		children: [
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx;'
			},
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx; margin-left: 5rpx;'
			},
			{
				type: 'custom',
				style: 'width: calc((100vw - 10rpx) / 3); height: 340rpx; margin-left: 5rpx;'
			}
		]
	}
])

// 分享给好友
onShareAppMessage((e) => {
	return {
		title: '咸虾米壁纸',
		path: `/pages/wallpaper-list/wallpaper-list?id=${classid.value}&name=${className.value}`
	}
})

onLoad((options) => {
	classid.value = options.id
	type.value = options.type
	
	useWallpaper.wallpaperList = []
	// console.log(options)
	className.value = options.name
	uni.setNavigationBarTitle({
		title: options.name
	})
})
</script>

<template>
	<view class="wallpaper-list">
		<z-paging ref="paging" v-model="wallPaperList" @query="queryList" @onRefresh="onRefresh" loading-full-fixed>
			<!-- <uv-skeletons :skeleton="skeleton"></uv-skeletons> -->
			<view class="content">
				<view class="image-box" @click="ClickToDetail(index)" v-for="(item, index) in wallPaperList" :key="item._id">
					<image :src="item.smallPicurl" mode="aspectFill"></image>
				</view>
			</view>
			
			<!-- 骨架屏 -->
			<uv-skeletons :loading="!wallPaperList.length && !noData" :skeleton="skeleton"></uv-skeletons>
			
			<!-- 加载中view -->
			<template #loading>
				<loading-icon style="height: 100%;" />
			</template>
			
			<!-- 下拉刷新view -->
			<template #refresher="{refresherStatus}">
				<custom-refresher :status="refresherStatus" />
			</template>
			
			<!-- 加载更多view -->
			<template #loadingMoreLoading>
				<loading-icon />
				<view class="safe-area-inset-bottom"></view>
			</template>
				
			<!-- 没有更多数据view -->
			<template #loadingMoreNoMore>
				<no-more />
				<view class="safe-area-inset-bottom"></view>
			</template>
		</z-paging>
		
		<!-- <loading-icon :showLoading="showLoading" /> -->
		
		<!-- <view class="content">
			<navigator class="image-box" v-for="item in wallPaperList" :key="item._id" url="/pages/preview/preview">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view> -->
		
		<!-- <no-more v-if="noData" /> -->
	</view>
</template>

<style scoped lang="scss">
.wallpaper-list {
	padding: 0 5rpx;
	
	.content {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5rpx;
		
		.image-box {
			height: 340rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
